<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        .floor {
            width: 800px;
            height: 300px;
            margin: 0 auto;
            font: bold 100px/300px "微软雅黑";
            text-align: center;
            color: white;
        }

        body .floor:nth-of-type(1) {
            background: red;
        }

        body .floor:nth-of-type(2) {
            background: blue;
        }

        body .floor:nth-of-type(3) {
            background: purple;
        }

        body .floor:nth-of-type(4) {
            background: orange;
        }

        body .floor:nth-of-type(5) {
            background: cadetblue;
        }

        body .floor:nth-of-type(6) {
            background: blueviolet;
        }
        ul{
            width:100px;
            border:1px solid black;
            text-align: center;
            line-height: 30px;
            position:fixed;
            top:200px;
            left:50px;
        }
        ul li{
            list-style: none;
            height:30px;
            border-bottom: 1px solid black;
            cursor:pointer;
        }
        ul li.active{
            background: black;
            color:white;
        }
        #top{
            width:800px;
            height:800px;
            background: black;
            margin:0 auto;
        }
    </style>
    <script>
        window.onload = function () {
            var oFloors = document.getElementsByClassName('floor');
            var tops = [];
            var lis = document.getElementsByTagName('li');
            tops = getTops(oFloors);
            clickFloor();
            function getTops(arr) {
                var newArr = [];
                for (var i = 0; i < arr.length; i++) {
                    newArr.push(arr[i].offsetTop);
                }
                return newArr;
            }

            //绑定滚动条事件
            window.addEventListener('scroll',roll)
            function roll(ev){
                var ev = event || ev;
                var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
                var index = getIndex(scrollTop,tops);
                for(var i=0;i<lis.length;i++){
                    lis[i].className = '';
                }
                if(index<lis.length){
                    lis[index].className = 'active';
                }
            }

//            楼层按钮点击
            function clickFloor(){
                var index = 0;
                var timer = null;
                for(var i=0;i<lis.length;i++){
                    lis[i].index = i;
                    lis[i].onclick = function(){
                        index = this.index;
                        for(var j=0;j<lis.length;j++){
                            lis[j].className = '';
                        }
                        lis[index].className = 'active';
                        var target = tops[index];
                        window.removeEventListener('scroll',roll);
                        clearInterval(timer);
                        timer = setInterval(function(){
                            var old = document.documentElement.scrollTop || document.body.scrollTop;
                            var speed = old>target ? -10:10;
                            var newTop = old + speed;
                            console.log(old,speed,newTop)
                            if(newTop>=target&&speed>0||newTop<=target&&speed<0){
                                newTop = target;
                                clearInterval(timer);
                                window.addEventListener('scroll',roll);
                            }
                            document.documentElement.scrollTop = newTop;
                            document.body.scrollTop = newTop;
                        },1000/60);
                    }
                }

            }
            function getIndex(scrollTop,arr){
                for(var i=0;i<arr.length;i++){

                    if(arr[i]-200<scrollTop&&arr[i+1]-200>scrollTop){
                        return i;
                    }
                }
            }
        }
    </script>
</head>
<body>
<ul>
    <li class="active">1楼</li>
    <li>2楼</li>
    <li>3楼</li>
    <li>4楼</li>
    <li>5楼</li>
    <li>6楼</li>
</ul>
<div id="top"></div>
<div class="floor">
    1楼
</div>
<div class="floor">
    2楼
</div>
<div class="floor">
    3楼
</div>
<div class="floor">
    4楼
</div>
<div class="floor">
    5楼
</div>
<div class="floor">
    6楼
</div>
</body>
</html>